<template>
  <div class="notify-page">
    <van-nav-bar fixed title="全部订单" />
    <van-tabs sticky v-model:active="active" @click-tab="onClickTab" offset-top="45px">
      <van-tab title="全部" name="6">
        <order-list v-if="cont == 6" :status="6" />
      </van-tab>
      <van-tab title="待付款" name="0">
        <order-list v-if="cont == 0" :status="0" />
      </van-tab>
      <van-tab title="待使用" name="1">
        <order-list v-if="cont == 1" :status="1" />
      </van-tab>
      <van-tab title="已完成" name="2">
        <order-list v-if="cont == 2" :status="2" />
      </van-tab>
      <van-tab title="退款" name="3">
        <order-list v-if="cont == 3" :status="3" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import OrderList from "./components/OrderList.vue";
import { ref, onMounted } from "vue";
const active = ref('6');
const cont = ref(6)

const onClickTab = ({ title }) => {
  if (title == "全部") {
    cont.value = 6
    console.log('点击:', active.value);

  } else if (title == "待付款") {
    cont.value = 0
    console.log('点击:', active.value);

  } else if (title == "待使用") {
    cont.value = 1
    console.log('点击:', active.value);
  } else if (title == "已完成") {
    cont.value = 2
    console.log('点击:', active.value);

  } else {
    cont.value = 3
    console.log('点击:', active.value);
  }
}
onMounted(() => {
  console.log('是否有cont:', Number(sessionStorage.getItem("managerTab")));

  cont.value = sessionStorage.getItem("managerTab") ? Number(sessionStorage.getItem("managerTab")) : 6;
  active.value = sessionStorage.getItem("managerTab");
})

</script>

<style lang="scss" scoped>
:deep(.van-tabs__content) {
  min-height: 80vh;
  background-color: #f5f5f5;
  padding: 55px 15px;
}

:deep(.van-tab__panel) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
